<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<h2>多规格</h2>
		</div>
		<div id="forguige">
			<!-- <div id="guiges">
				<div>
					规格名：<span id="guige_title"></span>
				</div>
				<div id="guige_value">
					规格值：<span></span>
				</div>
			</div> -->
		</div>
		<div id="tianjia_but">
			<button type="button" onclick="multispecification()" class="button_primary">添加新规格</button>
			<button type="button" onclick="generated()" class=" button_primary button_success">立即生成</button>
		</div>
		<div id="tianjia_buts" style="display: none">
			<div class="tianjia_buts_left">
				规格: <input class="tianjia_buts_input" type="规格" placeholder="请输入规格" name="" id="guige" value="" />
			</div>
			<div class="tianjia_buts_left">
				规格属性: <input  class="tianjia_buts_input" type="规格值" placeholder="请输入规格属性" name="" id="guigezhi" value="" />
			</div>

			<button type="button" onclick="queding(1)" class="button_primary">确定</button>
			<button type="button" onclick="quxiao()" class="button_primary el-button_danger">取消</button>
		</div>
		<script type="text/javascript">
			var specification=[] //多规格数组
			//添加新规格
			function multispecification(){
				document.getElementById('tianjia_but').style.display='none'
				document.getElementById('tianjia_buts').style.display=''
				qingkong()
			}
			//取消添加
			function quxiao(){
				document.getElementById('tianjia_but').style.display=''
				document.getElementById('tianjia_buts').style.display='none'
				qingkong()
			}
			//确定添加
			function queding(type){

				let guige=document.getElementById('guige').value
				let guigezhi=document.getElementById('guigezhi').value
				if((guige!=''&&guigezhi!='')||type==2){
					if(type!=2){
						let arr={
							name:guige,
							value:guigezhi
						}
						//Object.assign拷贝互不影响
						specification.push(Object.assign({},arr))
					}

					document.getElementById('forguige').innerHTML=''
					for(let i=0;i<specification.length;i++){
						if(specification[i].value  instanceof Array){

						}else{
							let arr=specification[i].value
							specification[i].value=[]
							specification[i].value.push(arr)
						}
						//创建div
						div=document.createElement('div')
						div.id='guiges'+i
						div.className='guigeall'
						// div1=document.createElement('div')
						div.innerHTML=`
						<div class="guige">
							<div class="guige_top">
								<span class="specification_title">规格名:</span>
								<span class="specification_text">${specification[i].name}<i shangji="${i}"  class="el-tag__close el-icon-close iconfont icon-wudi" id="value${i}" onclick="deletetitle(this)"></i></span>
							</div>
							<div id="zhi${i}" class="guige_bot">
								<span class="specification_title">规格值:</span>
								<span class="specification_value">${specification[i].value}
								<i shangji="${i}" dangqian="0" class="el-tag__close el-icon-close iconfont icon-wudi" id="value${i}" onclick="deleteValue(this)"></i>
								</span>
									<div class="inpt_meihua" id="guiinput${i}">
										<input id="add${i}" placeholder="请输入规格属性"></input>
										<div class="el-input-group__append">
											<button onclick="addition(${i})">添加</button>
										</div>
									</div>
							</div>
						</div>`
						// console.log(div)
						document.getElementById('forguige').appendChild(div)
						let brr='zhi'+i
						if(specification[i].value  instanceof Array){
							document.getElementById(`${brr}`).innerHTML='<span class="specification_title">规格值:</span>'
							for(let d=0;d<specification[i].value.length;d++){
								span = document.createElement('span')
								span.innerHTML=`<span class="specification_value">${specification[i].value[d]}<i shangji="${i}" dangqian="${d}" class="el-tag__close el-icon-close iconfont icon-wudi" id="value${d}" onclick="deleteValue(this)"></i></span>`
								// console.log(span)
								document.getElementById(`${brr}`).appendChild(span)
							}
							div =document.createElement('div')
							div.id='guiinput'+i
							div.className='inpt_meihua'
							div.innerHTML=`<input id="add${i}" placeholder="请输入规格属性"></input>
										<div class="el-input-group__append">
											<button onclick="addition(${i})">添加</button>
										</div>`
							document.getElementById(`${brr}`).appendChild(div)
						}else{

						}
					}
					qingkong()
				}else{
					alert('请输入内容')
				}
				quxiao()
			}
			//添加规格值的input框
			function tianguigezhi(index){
				 div=document.createElement('div')
				 // div.innerHTML=`<div id="guiinput${index}"><input id="add${index}"></input><button onclick="addition(${index})">确定</button></div>`
				 let arr='zhi'+index
				 document.getElementById(`${arr}`).appendChild(div)
				// specification[index]
			}
			//确定添加
			function addition(index){
				let inputvalue = document.getElementById(`add${index}`).value
				if(inputvalue=='')return
				// console.log(inputvalue)
				let brr='zhi'+index
				console.log(specification,specification[index].value.length)
				if(specification[index].value  instanceof Array){
					specification[index].value.push(inputvalue)
				}else{
					let arr=specification[index].value
					specification[index].value=[]
					// console.log(arr,specification)
					// console.log(index)
					specification[index].value.push(arr)
					specification[index].value.push(inputvalue)
				}
				console.log(specification)
				document.getElementById(`${brr}`).innerHTML='<span class="specification_title">规格值:</span>'

				for(let i=0;i<specification[index].value.length;i++){
					span = document.createElement('span')
					span.innerHTML=`<span class="specification_value">${specification[index].value[i]}<i shangji="${index}" dangqian="${i}" class="el-tag__close el-icon-close iconfont icon-wudi" id="value${i}" onclick="deleteValue(this)"></i></span>`
					// console.log(span)
					document.getElementById(`${brr}`).appendChild(span)
				}
				div = document.createElement('div')
				// div.innerHTML=`<button id="tian${index}" onclick="tianguigezhi(${index})">+</button>`
				div.innerHTML=`<div class="inpt_meihua" id="guiinput${index}"><input id="add${index}" placeholder="请输入规格属性"></input><div class="el-input-group__append"><button onclick="addition(${index})">添加</button></div></div>`
				document.getElementById(`${brr}`).appendChild(div)
				quxiao()
			}
			//清空input
			function qingkong(){
				document.getElementById('guige').value=''
				document.getElementById('guigezhi').value=''
			}

			//隐藏输入框
			function yincang01(){
				for(let i=0;i<specification.length;i++){
					let arr ='guiinput$'+i
					document.getElementById(`${arr}`).style.display='none'
				}
			}

			//删除规格值
			function deleteValue(i){
				console.log(i,i.attributes)
				let shangji =Number(i.attributes[0].value)
				let dangqian =Number(i.attributes[1].value)

				if(specification[shangji].value instanceof Array){
					console.log(specification,specification[shangji].value)
					specification[shangji].value.splice(dangqian,1)
					queding(2)
				}else{
					specification[shangji].value=[]
					queding(2)
				}
			}
			//删除规格
			function deletetitle(i){
				console.log(i,i.attributes)
				let shangji =Number(i.attributes[0].value)
				if(specification[shangji].value instanceof Array){
					console.log(specification,specification[shangji].value)
					specification.splice(shangji,1)
					queding(2)
				}else{
					specification[shangji].value=[]
					specification.splice(shangji,1)
					queding(2)
				}
			}
			//立即生成
			function generated(){
				let arrange1=[]
				arrange=specification
				let len = arrange.length //共len个规格
				let group =0
				for(let i=0;i<len;i++){
					let  single = arrange[i].value.length;
					if(i===0){
						group += single
					}else{
						group *= single
					}
				}
				// console.log(group) //共group组合方式
				let newshuzu=[]
				let duixiang={}
				for(let k=0;k<len;k++){
					duixiang.value=[]
					duixiang.name=arrange[k].name
					let kind =arrange[k].value.length                                             //当前元素种类--2
					let newlen =group/arrange[k].value.length             							 //当前元素重复率--6
					let circulation=0
					let repeatlevel=''
					let cfcs=''
					for(let j=0;j<kind;j++){
						if(k===0){
							for(let h=0;h<newlen;h++){
								//已知同一个元素重复newlen次
								duixiang.value.push(arrange[k].value[j])
							}
						}
						if(k>0){
							let shuzu=[]
							let superior_kund =arrange[k-1].value.length     					     //上级元素种类--2
							let repetition1   = group/superior_kund           							 //上级重复率----6
							let newchongfu=''
							/* if(repetition1>=newlen){
								newchongfu=1
							}else{
								//如果上级重复率比当前级重复率小 则得到当前级每重复newchongfu次换次元素
								newchongfu=repetition1/kind                                               //2
							} */
							/* let n = 0 */
							/* 因为已知总长度是group 上级的种类是 superior_kund 上级的重复率是 repetition1*/
							/* 已知当前的种类是kind  当前的重复率是newlen */
							/* 已知 Ordervalue 上级种类/当前种类的值大于1则证明当前种类小于上级种类 小于1则当前种类大于上级种类 等于1则当前种类与上级种类相同 */
							/* Ordervalue 若>1 则排序规则为在上级单个元素重复newchongfu次时变换当前元素 （上级元素重复率/当前元素种类）*/
							/* Ordervalue 若<1 则排序规则为repetition1/kind时再次变换一遍元素  （上级元素重复率/当前元素种类）*/
							/* Ordervalue 等=1 则排序规则和上一次的排序规则一致 （上级元素重复率/当前元素种类）*/
							/* 如果上级元素的重复率/当前种类就是每多久重复一次 */
							/* ！！！！##第一次重复开始的 */
							//当前元素重复水平 repeatlevel次重复一遍（整体遍）
							for(let z=0;z<newshuzu[k-1].value.length;z++){
								let item=newshuzu[k-1].value[z]
								let items=newshuzu[k-1].value[z+1]
								if(item!=items){
									 repeatlevel=z+1
									 break
								}
							}
							//当前元素重复水平 repeatlevels次重复一次（单个次）
							let repeatlevels=repeatlevel/kind
							// console.log(repeatlevels)
							for(let w=0;w<repeatlevels;w++){
								duixiang.value.push(arrange[k].value[j])
							}
						}
					}
					if(k>0){
						cfcs=newshuzu[k-1].value.length/repeatlevel
						// console.log(cfcs)
						let xinshuzu=duixiang.value
						for(let i=1;i<cfcs;i++){
							duixiang.value=duixiang.value.concat(xinshuzu)
						}
					}
					let addInsureDate=Object.assign({},duixiang);
					newshuzu.push(addInsureDate)
				}
				console.log(newshuzu)
				arrange=newshuzu
				for(let d=0;d<arrange[0].value.length;d++){
					arrange1[d]={}
					for(let u=0;u<arrange.length;u++){
						let guige=arrange[u].name
						arrange1[d][guige]=arrange[u].value[d]
					}
				}
				arrange=arrange1
				console.log(arrange1)
			}

		</script>
	</body>
	<style>
		@import url("css/index.css");
		.specification_text{
			background-color: #f0f9eb;
			border-color: #e1f3d8;
			color: #67c23a;
			height: 24px;
			padding: 0 8px;
			line-height: 22px;
			font-size: 12px;
			border-width: 1px;
			border-style: solid;
			border-radius: 4px;
			box-sizing: border-box;
			white-space: nowrap;
			margin-right: 12px;
		}
		.guigeall{
			margin: 12px 0;
			line-height: 2;
		}
		.specification_value{
			background-color: #ecf5ff;
			border-color: #d9ecff;
			color: #409EFF;
			height: 24px;
			padding: 0 8px;
			line-height: 22px;
			font-size: 12px;
			border-width: 1px;
			border-style: solid;
			border-radius: 4px;
			box-sizing: border-box;
			white-space: nowrap;
			margin-right: 12px;
		}
		.guige_top{
			display: flex;
			align-items: center;
		}
		.guige_bot{
			display: flex;
			align-items: center;
		}
		.inpt_meihua{
			margin-left: 12px;
			width: 200px;
			vertical-align: top;
			line-height: normal;
			display: inline-table;
			border-collapse: separate;
			border-spacing: 0;
			font-size: 13px;
			position: relative;
		}
		.inpt_meihua input{
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			vertical-align: middle;
			display: table-cell;
			height: 32px;
			line-height: 32px;
			-webkit-appearance: none;
			background-color: #FFF;
			background-image: none;
			border-radius: 4px;
			border: 1px solid #DCDFE6;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			color: #606266;
			display: inline-block;
			font-size: inherit;
			height: 30px;
			line-height: 30px;
			outline: 0;
			padding: 0 15px;
			-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
			transition: border-color .2s cubic-bezier(.645,.045,.355,1);
			width: 100%;
		}
		.el-input-group__append{
			background-color: #F5F7FA;
			color: #909399;
			vertical-align: middle;
			display: table-cell;
			position: relative;
			border: 1px solid #DCDFE6;
			border-radius: 4px;
			padding: 0 20px;
			width: 1px;
			white-space: nowrap;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
		.el-input-group__append button{
			display: inline-block;
			line-height: 1;
			white-space: nowrap;
			cursor: pointer;
			background: #FFF;
			border: 1px solid #DCDFE6;
			color: #606266;
			-webkit-appearance: none;
			text-align: center;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			outline: 0;
			margin: 0;
			-webkit-transition: .1s;
			transition: .1s;
			font-weight: 500;
			padding: 12px 20px;
			font-size: 14px;
			border-radius: 4px;
			font-size: 12px;
			border-radius: 3px;
			padding: 9px 15px;
			display: inline-block;
			margin: -10px -20px;
			margin-left: 12px;
			border-color: transparent;
			background-color: transparent;
			color: inherit;
			border-top: 0;
			border-bottom: 0;
		}
		.button_primary{
			display: inline-block;
			line-height: 1;
			white-space: nowrap;
			cursor: pointer;
			background: #FFF;
			border: 1px solid #DCDFE6;
			color: #606266;
			-webkit-appearance: none;
			text-align: center;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			outline: 0;
			margin: 0;
			-webkit-transition: .1s;
			transition: .1s;
			font-weight: 500;
			padding: 12px 20px;
			font-size: 14px;
			border-radius: 4px;
			color: #FFF;
			background-color: #409EFF;
			border-color: #409EFF;
			font-size: 12px;
			border-radius: 3px;
			padding: 9px 15px;
			margin-left: 12px;
		}
		.button_success{
			background: #85ce61;
			border-color: #85ce61;
			color: #FFF;
		}
		.tianjia_buts_input{
			-webkit-appearance: none;
			background-color: #FFF;
			background-image: none;
			border-radius: 4px;
			border: 1px solid #DCDFE6;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			color: #606266;
			display: inline-block;
			font-size: inherit;
			height: 40px;
			line-height: 40px;
			outline: 0;
			padding: 0 15px;
			-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
			transition: border-color .2s cubic-bezier(.645,.045,.355,1);
			width: 172px;
			margin-left:12px;
		}
		.el-button_danger{
			color: #FFF;
			background-color: #F56C6C;
			border-color: #F56C6C;
		}
		#tianjia_buts{
			display: flex;
			align-content: center;
		}
		.tianjia_buts_left{
			margin-left: 50px;
		}
	</style>

</html>
